<template>
  <!-- 添加个人信息 -->
  <el-dialog
    class="add-store-dialog"
    :title="title"
    :visible.sync="addVisible"
    width="45%"
  >
    <div class="store-body">
      <el-form
        ref="storeFormRef"
        :rules="rules"
        :model="storeForm"
        label-width="120px"
      >
        <el-form-item class="flex-per50" prop="username" label="用户名">
          <el-input
            :disabled="title != '个人信息录入'"
            v-model="storeForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item class="flex-per50" prop="realName" label="真实姓名">
          <el-input v-model="storeForm.realName"></el-input>
        </el-form-item>
        <el-form-item class="flex-per50" prop="age" label="年龄">
          <el-input v-model="storeForm.age"></el-input>
        </el-form-item>
        <el-form-item class="flex-per50" prop="phone" label="电话">
          <el-input v-model="storeForm.phone"></el-input>
        </el-form-item>
        <el-form-item class="flex-per50" prop="idNumber" label="身份证号">
          <el-input v-model="storeForm.idNumber"></el-input>
        </el-form-item>
        <el-form-item
          class="flex-per50"
          prop="createTime"
          label="驾驶证起始时间"
        >
          <el-date-picker
            v-model="storeForm.createTime"
            placeholder="选择日期时间"
            default-time="12:00:00"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item class="flex-per50" prop="endTime" label="驾驶证结束时间">
          <el-date-picker
            v-model="storeForm.endTime"
            placeholder="选择日期时间"
            default-time="12:00:00"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addUserInfo, updateInfo } from "@/api/user";
export default {
  name: "AddDialog",
  components: {},
  props: {
    visible: {
      default: false,
      type: Boolean,
    },
    storeData: {
      type: Object,
      default: {},
    },
    title: {
      type: String,
      default: "个人信息录入",
    },
  },
  data() {
    //验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      //验证手机号正则表达式
      const regMobile =
        /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的手机号！"));
    };
    //在规则中定义mobile: [{ validator: checkMobile, trigger: 'blur' },{ required: true, message: '请输入邮箱', trigger: 'blur' }]
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      //表单
      storeForm: {
        username: null,
        password: null,
        nickname: null,
        email: null,
        user_pic: null,
        realName: null,
        age: null,
        phone: null,
        idNumber: null,
        createTime: null,
        endTime: null,
        examTime: null,
        examScore: null,
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        realName: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "请输入年龄",
            trigger: "blur",
          },
          {
            min: 0,
            max: 100,
            message: "年龄应为0~100之间",
            trigger: "blur",
          },
        ],
        phone: [
          {
            validator: checkMobile,
            trigger: "blur",
          },
        ],
        createTime: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        endTime: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        idNumber: [
          {
            required: true,
            message: "请输入身份证号码",
            trigger: "blur",
          },
          {
            min: 18,
            max: 18,
            message: "身份证号码应为18位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  created() {},
  mounted() {
    if (this.title !== "个人信息录入") {
      this.handleEditInfo();
    }
  },
  computed: {
    addVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    cancel() {
      this.$refs.storeFormRef.resetFields();
      this.addVisible = false;
    },
    handleEditInfo() {
      this.storeForm = this.storeData;
    },
    confirm() {
      this.$refs.storeFormRef.validate(async (valid) => {
        if (valid) {
          if (this.title === "个人信息录入") {
            const res = await addUserInfo(this.storeForm);
            if (res?.status === 0) {
              this.$message.success(res.message);
              this.$emit("confirm");
              this.addVisible = false;
            } else {
              this.$message.error(res.message);
            }
          } else {
            //编辑个人信息
            if (!this.storeForm?.id)
              return this.$message.warning("无id，请选择要编辑的信息!");
            const res = await updateInfo(this.storeForm);
            if (res?.status === 0) {
              this.$message.success(res.message);
              this.$emit("confirm");
              this.addVisible = false;
            } else {
              this.$message.error(res.message);
            }
          }
        } else {
          console.log("错误提交！请重试！");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 220px;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
}
.flex-per50 {
  width: 50%;
}
</style>
